<template>
  <div class="text-component" :style="textStyle">
    <div 
      v-if="editing && !previewMode"
      contenteditable="true"
      @blur="finishEdit"
      @keydown.enter.prevent="finishEdit"
      ref="textEditor"
      v-html="componentData.props?.content || '双击编辑文本'"
      class="text-editor"
    />
    <div 
      v-else 
      @dblclick="startEdit"
      v-html="componentData.props?.content || '双击编辑文本'"
      class="text-display"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
  previewMode?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  previewMode: false
})

// Emits
const emit = defineEmits<{
  update: [property: string, value: any]
}>()

// 响应式数据
const editing = ref(false)
const textEditor = ref<HTMLElement>()

// 计算属性
const textStyle = computed(() => {
  const style = props.componentData.style || {}
  console.log('TextComponent: textStyle computed, style:', style)
  
  const computedStyle = {
    fontSize: style.fontSize || '14px',
    color: style.color || '#333',
    fontWeight: style.fontWeight || 'normal',
    textAlign: style.textAlign || 'left',
    lineHeight: style.lineHeight || '1.5',
    fontFamily: style.fontFamily || 'inherit',
    backgroundColor: style.backgroundColor || 'transparent',
    borderColor: style.borderColor || 'transparent',
    borderWidth: style.borderWidth || '0px',
    borderRadius: style.borderRadius || '0px',
    opacity: style.opacity || 1,
    padding: '8px',
    boxSizing: 'border-box',
    ...style
  }
  
  console.log('TextComponent: final computedStyle:', computedStyle)
  return computedStyle
})

// 开始编辑
const startEdit = () => {
  if (props.previewMode) return
  
  editing.value = true
  nextTick(() => {
    if (textEditor.value) {
      textEditor.value.focus()
      // 选中所有文本
      const range = document.createRange()
      range.selectNodeContents(textEditor.value)
      const selection = window.getSelection()
      selection?.removeAllRanges()
      selection?.addRange(range)
    }
  })
}

// 完成编辑
const finishEdit = () => {
  if (textEditor.value) {
    const content = textEditor.value.innerHTML
    // 更新组件的 props.content
    if (props.componentData.props) {
      props.componentData.props.content = content
    }
    // 发出更新事件
    emit('update', 'props.content', content)
  }
  editing.value = false
}
</script>

<style lang="scss" scoped>
.text-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.text-editor,
.text-display {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background: transparent;
  resize: none;
  overflow: auto;
}

.text-editor {
  border: 1px dashed #409eff;
  padding: 4px;
  background-color: rgba(64, 158, 255, 0.05);
}

.text-display {
  cursor: text;
  
  &:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
}
</style>
